<template>
  <div class="joiner-list">
    <div class="task-title">
      task name
    </div>

    <div class="task-data" v-for="data in dataList">
      <div class="data-time">
        上传时间:
        <span>
          {{ data.update_time }}
        </span>
      </div>
      <div class="data-time">
        数据简要说明:
        <span>
          {{ data.data_brief }}
        </span>
      </div>
    </div>

    <div class="">
      <mt-button type="primary" @click="grantMoney">发放报酬</mt-button>
    </div>

    <tab-bar></tab-bar>

  </div>
</template>

<script>
import axios from 'axios';
import qs from 'qs';
import { Toast } from 'mint-ui';
import storeItem from '../utils/store';
import tabBar from './common/TabBar';

export default {
  name: 'joinerList',
  data() {
    return {
      taskId: 0,
      dataList: [],
    };
  },
  methods: {
    loadData() {
      axios.get('/task/find_task_data', {
        params: {
          task_id: this.taskId,
          token: storeItem.getItem('token'),
        },
      }).then((response) => {
        if (response.status === 200 && response.data.status === true) {
          this.dataList = response.data.data;
        }
      });
    },
    grantMoney() {
      axios.post('/trade/grant_money', qs.stringify({
        task_id: this.taskId,
        token: storeItem.getItem('token'),
      })).then((response) => {
        if (response.status === 200) {
          if (response.data.status === true) {
            Toast({
              message: '发放完毕',
              duration: 1500,
            });
          } else {
            Toast({
              message: '发放失败',
              duration: 1500,
            });
          }
        }
      });
    },
  },
  mounted() {
    this.taskId = this.$route.params.taskId;
    this.loadData();
  },
  components: {
    'tab-bar': tabBar,
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.joiner-list {
  margin-top: -40px;
}

.task-title {
  font-size: 16px;
}
.item {
  margin-top: 20px;
  margin-bottom: 20px;
}
.joiner-name {
  display: inline-block;
  width: 20%;
  text-align: left;
}
.join-time {
  display: inline-block;
  width: 50%;
}
.join-select {
  display: inline-block;
  width: 20%;
}
.select-submit {
  margin-top: 50px;
}
.task-data {
  text-align: left;
  padding: 20px;
  line-height: 30px;
}
.data-time span {
  margin-left: 10px;
}

</style>
